<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <base th:href="${#request.getContextPath() + '/'}"/>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta charset="UTF-8">
    <title>酒店添加页面</title>
    <script src="resources/scripts/jquery-1.8.3.min.js"></script>

    <script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=wRuD134wGGeWLLqbtPv2YNqoZa7AYuaE"></script>
    <!-- 百度地图的样式 -->
    <style type="text/css">
        html{height:100%}
        body{height:100%;margin:0px;padding:0px}
        #container{height:100%}
    </style>

    <!-- 弹窗插件 -->
    <script src="resources/widget/dialog/jquery-ui-1.9.2.custom.min.js"></script>
    <link rel="stylesheet" href="resources/widget/dialog/jquery-ui.min.css" type="text/css"
          media="screen" />

    <script>
        //弹出地图
        function openMap(){
            //弹框之前，初始化地图
            initMap();

            $("#map_dialog").dialog({
                title: "选择位置",
                width: 800,
                height: 550,
                modal: true
            });
        }

        /**
         * 初始化地图
         */
        function initMap() {
            //初始化地图
            var map = new BMap.Map("container");
            //地图中心点
            var point = new BMap.Point(116.404844,39.914935);
            //设置中心点
            //zoom - 地图的缩放级别
            map.centerAndZoom(point, 15);
            //开启鼠标滚轮缩放
            map.enableScrollWheelZoom(true);

            //定位城市，获得当前选择的城市
            var city = $("#cid option:selected").html();
            if (city != "--请选择--"){
                //设置地图的位置到当前城市
                map.centerAndZoom(city, 12);
            }

            //单击获取点击的经纬度
            map.addEventListener("click", function(e){
                var lat = e.point.lat;
                var lng = e.point.lng;

                $("#lat").val(lat);
                $("#lon").val(lng);

                //清空所有标注
                map.clearOverlays();

                //生成一个标注
                var p = new BMap.Point(lng, lat);
                var marker = new BMap.Marker(p);// 创建标注
                map.addOverlay(marker);
            });

        }

        /**
         * 选择了城市
         */
        function selectCity(){
            var cityname = $("#cid option:selected").html();
            $("#cityname").val(cityname);
        }
    </script>

</head>
<body>
    <h1>酒店添加页面</h1>

    <form action="/back/hotaladd" method="post" enctype="multipart/form-data">

        酒店名称:<input name="hotalName"/><br/>
        酒店图片:<input type="file" name="file"/><br/>
        酒店类型:<select name="type">
                        <option value="1">星级酒店</option>
                        <option value="2">快捷酒店</option>
                        <option value="3">民宿</option>
                        <option value="4">大通铺</option>
                </select><br/>
        关键词：<input name="keyword"/><br/>
        所在城市：<select id="cid" name="cid" onchange="selectCity();">
                    <option value="0">--请选择--</option>
                    <option th:each="city : ${citys}" th:text="${city.cityName}" th:value="${city.id}"></option>
                </select>
                <input id="cityname" type="hidden" name="cityname"/>
        <br/>
        行政区域：<input type="text" name="regid"/><br/>
        位置信息：<br/>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;经度:<input name="lon" id="lon"/><br/>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;纬度:<input name="lat" id="lat"/><br/>
              &nbsp;&nbsp;&nbsp;&nbsp;地图选择:<button type="button" onclick="openMap();">地图</button><br/>
        星级：<input name="star"/><br/>
        品牌：<input name="brand"/><br/>
        地址：<input name="address"/><br/>
        开业时间：<input name="openTime" type="date"/><br/>
        价格：<input name="price"/><br/>
        房间数量：<input name="roomNumber"/><br/>
        酒店信息：<textarea name="hotalInfo" rows="15" cols="50"></textarea><br/>
        <button type="submit">提交</button>
    </form>

    <!-- 弹窗的div -->
    <div id="map_dialog" style="display: none">
        <!-- 百度地图显示的标签 -->
        <div id="container"></div>

    </div>

</body>
</html>